<script setup lang="ts">
  import { onShow, onUnload } from "@dcloudio/uni-app";
  import { ref, nextTick } from "vue";
  import GoodsItem from "@/components/GoodsItem.vue";
  interface Od extends obj {
    goods: string;
    sum: number;
    _max: number;
    _goods: gt.sql.goods;
  }
  const data = ref<gt.sql.stock[]>([]),
    other = ref<gt.sql.stock[]>([]),
    od = ref<Od[]>([]),
    show = ref(false),
    all = ref(true),
    xd = ref(true),
    animationCls = ref("");

  let current = 0, run = true;

  async function fetch() {
    if (run || !current) {
      const r = await gd.stock.read({ "#page": { current: ++current, size: 10 }, gid: api.me.gid });
      if (current > 1) {
        data.value.push(...r.data);
      } else {
        data.value = r.data;
      }
      run = data.value.length > r.total;
      if (!other.value.length) {
        other.value = await format.stock(await api.request({}, "stock/other"));
      }
    }
  }
  async function change(p: any) {
    xd.value = all.value = p.detail.value;

  }
  async function xdchange(p: any) {
    xd.value = p.detail.value;
  }
  function add(p: gt.sql.stock) {
    const id = p._goods.id;
    let push = true;
    od.value.forEach(o => {
      if (o.goods == id) {
        o.cls = "active";
        push = false;
        o.sum++;
      } else {
        o.cls = false;
      }
    });
    if (push) {
      od.value.push({ goods: id, sum: 1, cls: "active", _goods: p._goods, _max: p.sum });
    }
    show.value = true;
    nextTick(() => {
      animationCls.value = "show";
    });
  }

  function init() {
    uni.setNavigationBarTitle({ title: "门店库存" });
    fetch();
  }
  onShow(() => {
    uni.$on("loaded", init);
  });

  function unload() {
    uni.$off("loaded", init);
  }
  onUnload(unload);
  function close() {
    animationCls.value = "";
    setTimeout(() => {
      show.value = false;
    }, 500);
  }
  function stop(p: MouseEvent) {
    p.stopPropagation();
  }
  function del(p: number) {
    if (p >= 0) {
      od.value.splice(p, 1);
    }
  }
  async function putOrder() {
    uni.showLoading({ title: "正在下单,请稍后", mask: true });
    console.log(od.value);
    const i = od.value.map(e => ({ goods: e.goods, gid: api.me.gid, sum: e.sum }));
    const r = await api.request({ type: "补货单", content: i }, "orderStock/create");
    if (r.id) {
      od.value = [];
      close();
    }
    uni.hideLoading();
  }
</script>
<template>
  <view class="stock y p04em whf oh">
    <scroll-view scroll-y class="fg1 wf oh">
      <view class="bar xw wf jc">
        <view class="x wf jc item">
          <view :class="all ? '' : 'active'">现有库存</view>
          <switch :checked="all" @change="change" />
          <view :class="all ? 'active' : ''">全部商品</view>
        </view>
        <view class="x wf jc item" v-if="all">
          <view :class="xd ? '' : 'active'">库存浏览</view>
          <switch :checked="xd" @change="xdchange" />
          <view :class="xd ? 'active' : ''">快捷下单</view>
        </view>
      </view>
      <view class="goods" v-for="(i, ii) in data" :key="ii">
        <GoodsItem :modelValue="i._goods" :sum="i.sum" row />
        <view v-if="xd && i.sum > 0" class="mac-ico-add-round-fill" @click="add(i)" />
      </view>
      <template v-if="all">
        <view class="diver mt1em x jc">其他商品</view>
        <view class="goods" v-for="(i, ii) in other" :key="ii">
          <GoodsItem :modelValue="i._goods" :sum="i.sum" row />
          <view v-if="xd && i.sum > 0" class="mac-ico-add-round-fill" @click="add(i)" />
        </view>
      </template>
    </scroll-view>
    <view class="picker whf pa" v-if="show" @click="close">
      <view class="picker-box wf y pa oh" :class="animationCls" @click="stop">
        <scroll-view scroll-y class="wf oh fg1" :key="od.length">
          <view class="goods" v-for="(i, ii) in od" :key="ii">
            <GoodsItem :modelValue="i._goods" v-model:sum="i.sum" row edit :min="0" :max="i._max" @del="del(ii)" />
          </view>
        </scroll-view>
        <view class="btns x jc">
          <button class="w49" type="warn" @click="close">取消</button>
          <button class="w49" type="primary" @click="putOrder">确定下单</button>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
  .stock {
    position: relative;
    .bar {
      >.item {
        margin-top: 1em;
        >switch {
          margin: 0 0.4em;
        }
        .active {
          color: $uni-color-primary;
        }
      }
    }
    .diver {
      text-wrap: nowrap;
      &::before, &::after {
        flex-grow: 1;
        border: 1px dashed #9999;
        content: "";
        margin: 0 0.4em;
      }
    }
    .goods {
      position: relative;
      .mac-ico-add-round-fill {
        position: absolute;
        right: 0.2em;
        top: 0.1em;
        color: $uni-color-success;
      }
    }
    >.picker {
      top: 0;
      left: 0;
      background-color: #0002;
      position: absolute;
      >.picker-box {
        height: 50%;
        border-radius: 0.4em;
        background-color: aliceblue;
        bottom: -100%;
        transition: bottom 0.5s ease-in-out;
        >.btns {
          height: 3em;
          flex-shrink: 0;
          flex-grow: 0;
        }
      }
      >.show {
        bottom: 0;
      }
    }
  }
</style>